<template>
	<GlobalBG title="账号安全" :showHeader="true" :showBack="true">
		<view class="container">
			<view class="conten-item-box">
				<view class="info-item bline" @click="gotoRoute('/pages/profile/infopage/password')">
					<view class="text">
						<view class="text-top">账号安全</view>
						<view class="text-tips">定期修改密码可以提高账号安全性</view>
					</view>
					<view class="arrow">
						去修改
						<uni-icons type="arrowright" color="#ccc" size="18"></uni-icons>
					</view>
				</view>
				<view class="info-item" @click="gotoRoute('/pages/profile/infopage/systemConfig')">
					<view class="text">
						<view class="text-top">手机绑定</view>
						<view class="text-tips">定期修改密码可以提高账号安全性</view>
					</view>
					<view class="arrow">
						更换
						<uni-icons type="arrowright" color="#ccc" size="18"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</GlobalBG>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	// 密码和手机
	const gotoRoute = (path : String) => {
		uni.navigateTo({ url: path });
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		padding-top: 20rpx;

		.conten-item-box {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			padding: 0rpx 34rpx 0 34rpx;
		}

		.info-item {
			display: flex;
			align-items: center;
			background-color: white;
			padding: 50rpx 15rpx;
			margin-bottom: 10px;
			&.bline {
				border-bottom: 2rpx solid #EDEDED;
			}

			&.login-out {
				height: 115rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 56rpx 0rpx rgba(70, 102, 149, 0.06);
				border-radius: 23rpx;
				text-align: center;
				box-sizing: border-box;
			}

			.icon {
				width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 15px;
			}

			.text {
				flex: 1;
				font-size: 31rpx;
				color: #333333;
				.text-top{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 31rpx;
					color: #333333;
					line-height: 42rpx;
				}
				.text-tips{
					margin-top: 21rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #999999;
					line-height: 38rpx;
				}
			}

			.arrow {
				// width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #2263BF;
			}
		}
	}
</style>